<template>
  <div>
    <van-tabbar
      v-model="activIndex"
      active-color="darkred"
      inactive-color="#999"
    >
      <van-tabbar-item
        to="/home"
        icon="home-o"
      >首页</van-tabbar-item>
      <van-tabbar-item
        to="/topic"
        icon="label-o"
      >专题</van-tabbar-item>
      <van-tabbar-item
        to="/category"
        icon="apps-o"
      >分类</van-tabbar-item>
      <van-tabbar-item
        to="/cart"
        icon="cart-o"
      >购物车</van-tabbar-item>
      <van-tabbar-item
        to="/user"
        icon="user-o"
      >我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  components: {},

  computed: {
    //计算属性本质是一个对象，里面包含一个set方法和一个get方法。仅设置了get则为只读。
    //如果用v-model绑定一个没有设置setter的computed。Vue会警告：
    activIndex: {
      get() {
        let arr = ["/home", "/topic", "/category", "/cart", "/user"];
        let active;
        arr.forEach((element, index) => {
          if (element == this.$route.path) {
            active = index;
            // console.log(active);
          }
        });
        return active;
      },
      set() {},
    },
    //这里也可以在路由中定义meta数据，添加一个index属性，
    //然后给v-model:$route.meta.index，注意html没有this!貌似有bug。还是不要用了。
    //可以用meta来携带信息。
  },

  methods: {},
};
</script>

<style lang='less' scoped>
</style>